<template>
  <div id="users-content">
    <title-bar></title-bar>
    <div class="users-center">
      <div class="users-content">
        <div class="register"><span>请登录</span></div>
        <div class="users-content-center">
          <div class="input-box">
            <!-- <div class="input-box-item">
              <input type="text" class="userName" placeholder="请输入用户名" v-modul="userName">
              <input type="password" class="password" placeholder="密码" v-model="password">
            </div> -->
              <input type="text" class="userName" placeholder="请输入用户名" v-model="userName">
              <input type="password" class="password" placeholder="密码" v-model="password">
            <div class="remember-forget">
              <div class="remember-item">
                <input type="checkbox" ref="remember"><span>记住我</span>
              </div>
              <div class="forget-psw-item">
                <span>忘记密码?</span>
              </div>
              
            </div>
              <button class="button" @click="login" :disabled="(!userName && !password) || disabled"><span>登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</span></button>
              <span style="font-size:12px; color:#149ed2;">新用户首次登录自动注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from '../../components/titleBar/TitleBar.vue'
  export default {
    data() {
      return {
        userName:'',
        password:'',
        loginState:'',
        disabled:false
      }
    },
    components:{
      TitleBar
    },
    methods:{
      login(){
        const userList = {}
        userList.userName = this.userName
        userList.password = this.password
        this.$store.dispatch('addLogin', userList).then(res=>{
          console.log(res);
          // console.log(res.indexOf('~'));
          this.loginState = res
          let loginInfo = this.loginState.substring(0, this.loginState.indexOf('~'))
          console.log(loginInfo)
          // 做登录后销毁button按键
          if(loginInfo == "欢迎回来"||"欢迎加入"){
            this.disabled = true
          }else if(loginInfo == "输入有误"){
            this.disabled = false
          }

          let loginName = this.loginState.substring(this.loginState.indexOf('~')+1)
          console.log(loginName);
          this.$bus.$emit('loginName', loginName)
          if( !this.$refs.remember.checked){
            this.userName = ''
            this.password = ''
          }
        })  
      }
    }
  }
</script>

<style lang="less" scoped>
.users-center{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 150px;
  
}
.users-content{
  background-color: #fff;
  height: 350px;
  padding: 10px 10px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 3px 3px 3px #eee;
}
.register{
  margin: 30px 0 10px;
  font-size: 16px;
  color: skyblue;
  text-align: center;
}
.users-content-center{
  display: flex;
  margin: 10px 100px ;
}

.input-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;

}
// .input-box-item{
  
// }
.userName,.password,.button{
  height: 45px;
  width: 350px;
  border-radius: 10px;
  border: 1px solid #ccc;
  outline: none; // 点击时span标签的boder不变出自带颜色
}
.userName,.password{
  padding: 2px 10px;
  font-size: 14px;
}
.userName:focus,
.password:focus{
  border: 1px solid #149ed2;
  box-shadow: 0px 0px 2px #98daf3 inset;
}
.userName::placeholder,
.password::placeholder{
color: #c3c3c3;
}
.userName{
  margin-bottom: 2px;
}
.remember-forget{
  width: 350px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.button{
  border: none;
  background-color: rgb(53, 177, 226);
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.button:disabled {
  background-color: #98daf3;
}

.remember-item{
  display: flex;
  justify-content: center;
  align-items: center;
  span{
    margin-left: 2px;
  }
}

.forget-psw-item{
  color: #149ed2;
  border-bottom: 1px solid #149ed2;
}

</style>